<template>
	<view class="detail">
		<view class="detail-t">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :circular="true" interval="3000">
				 <swiper-item v-for="item in productList.imgs">
					<image :src="item" mode=""></image>
				 </swiper-item>
			</swiper>
			<view class="collect" @tap="collect">
				<image src="../../../static/image/icons/collect.png" v-if="!collectFlag" mode=""></image>
				<text v-else>已收藏</text>
			</view>
		</view>
		<view class="detail-c">
			<view class="color">
				<view class="color-item" v-for="item in productList.skuList" :style="{ 'background': item.color }">
				</view>
			</view>
			<view class="info">
				<view class="cname">
					{{ productList.gname }}
				</view>
				<view class="ename">
					EnglistName
				</view>
				<view class="price">
					￥{{ productList.price_now }}
				</view>
				<view class="desc">
					{{productList.descr}}
				</view>
			</view>
		</view>
		<view class="detail-b">
			<view class="contact">
				<image src="../../../static/image/icons/kf.png" mode=""></image>
				<view class="desc">客服</view>
			</view>
			<view class="shopping">
				<view class="cart" @tap="addShopCart">
					<image src="../../../static/image/icons/cart2.png" mode=""></image>
				</view>
				<view class="buy" @tap="buy">
					立即购买
				</view>
			</view>
		</view>
		<view class="mask" v-if="buyFlag">
			<view class="goods-info">
				<view class="info-t">
					<image :src="productList.cover_img" mode=""></image>
					<view class="info-t-c">
						<view class="title">
							{{ productList.gname }}
						</view>
						<view class="stock">
							库存{{ productList.skuList[currentIndex].count }}
						</view>
					</view>
					<view class="info-t-r">
						<image src="../../../static/image/icons/x.png" class="close" @tap="close" mode=""></image>
					</view>
				</view>
				<view class="info-c">
					<view class="title">
						颜色分类
					</view>
					<view class="colors" >
							<view class="color" :class="{ active: currentIndex == index }" @tap="changeSku(index)" v-for="(item, index) in productList.skuList">
								{{ item.color_text }}
							</view>
					</view>
					<view class="title">
						特色服务
					</view>
					<view class="colors" >
							<view class="color">
								送货上门
							</view>
							<view class="color">
								免费安装
							</view>
					</view>
				</view>
				<view class="count info-c">
					<view class="title">
						购买数量
					</view>
					<view class="opation">
						<view class="sub" @tap="sub">
							<view class="line">
								
							</view>
						</view>
						<view class="num">
								{{ count }}
						</view>
						<view class="add" @tap="add">
							<view class="line">
								
							</view>
							<view class="line">
								
							</view>
						</view>
					</view>
				</view>
				<view class="confirm" @tap="shopCartOrOrder">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { detail } from '../../../utils/kind/detail/index.js';
	export default {
		data() {
			return {
				productId: '',
				productList: {},
				buyFlag: false,
				currentIndex: 0,
				count: 1,
				collectFlag: false,
				sku_code: 0,
				sku_id: 0,
				color_text: '',
				goPage: ''
			}
		},
		methods: {
			async getGoodsDetail () {
				let data = await detail({
					productId: this.productId
				});
				if (typeof data.data.data.imgs == 'string') {
					data.data.data.imgs = data.data.data.imgs.split(',');
				}
				this.productList = data.data.data;
				this.sku_code = this.productList.skuList[this.currentIndex].sku_code;
				this.color_text = this.productList.skuList[this.currentIndex].color_text;
				this.sku_id = this.productList.skuList[this.currentIndex].id;
				console.log(data);
				let collectList = uni.getStorageSync('collectList');
				if (collectList) {
					this.collectFlag = collectList.some(el => el.id == this.productList.id);
					
				} else {
					this.collectFlag = false;
				}
			},
			buy () {
				this.buyFlag = true;
				this.goPage = 'buy';
			},
			close () {
				this.buyFlag = false;
				this.count = 1;
			},
			changeSku (index) {
				this.currentIndex = index;
				this.sku_code = this.productList.skuList[this.currentIndex].sku_code;
				this.color_text = this.productList.skuList[this.currentIndex].color_text;
				this.sku_id = this.productList.skuList[this.currentIndex].id;
			},
			addShopCart () {
				this.buyFlag = true;
				this.goPage = 'cart';
			},
			collect () {
				this.collectFlag = !this.collectFlag;
				// return;
				if (this.collectFlag) {
					if (uni.getStorageSync('collectList')) {
						// 存在collectList的情况
						let collectList = uni.getStorageSync('collectList');
						// console.log('收藏数',collectList);
						collectList.push(this.productList);
						uni.setStorageSync('collectList', collectList);
					} else {
						//不存在collectList的情况
						let collectList = [];
						collectList.push(this.productList);
						// uni.getStorageSync('collectList')
						uni.setStorageSync('collectList', collectList);
					}
					uni.showToast({
						icon:'none',
						title: '收藏商品成功'
					})
				} else {
					if (uni.getStorageSync('collectList')) {
						// 存在collectList的情况
						let collectList = uni.getStorageSync('collectList');
						let index = collectList.findIndex(el => el.id == this.productList.id);
						collectList.splice(index, 1);
						uni.showToast({
							icon:'none',
							title: '取消收藏成功'
						})
						uni.setStorageSync('collectList', collectList);
					} else {
						return;
					}
				}
				
			},
			add () {
				if (this.count >= this.productList.skuList[this.currentIndex].count) {
					uni.showToast({
						icon:'none',
						title: '购买商品数量不能超过商品库存'
					})
				} else {
					this.count++;
				}
			},
			sub () {
				if (this.count > 1) {
					this.count--;
				} else {
					uni.showToast({
						icon:'none',
						title: '商品数量不能再减少了'
					})
				}
			},
			shopCartOrOrder () {
				// this.productList.isChecked = false;
				// // this.productList.count = this.data.count;
				// this.productList.sku_code = this.sku_code;
				// this.productList.color_text = this.color_text;
				// 加购物车
				if (this.goPage == 'cart') {
					console.log('1');
					let cartList = uni.getStorageSync('shopCart');
					// 第一次添加购物车
					if (!cartList) {
						let shopCart = [];
						this.productList.isChecked = false;
						// this.productList.count = this.data.count;
						this.productList.sku_code = this.sku_code;
						this.productList.color_text = this.color_text;
						this.productList.count = this.count;
						this.productList.sku_id = this.sku_id;
						shopCart.push(this.productList);
						uni.setStorageSync('shopCart', shopCart);
					} else {
						let cartList = uni.getStorageSync('shopCart');
						let flag = cartList.some(el => el.id == this.productList.id);
						// 已经存在
						if (flag) {
							let currentProduct = cartList.find(el => el.id == this.productList.id);
							currentProduct.count += this.count;
						} else {
							// 不存在此商品
							this.productList.isChecked = false;
							// this.productList.count = this.data.count;
							this.productList.sku_code = this.sku_code;
							this.productList.color_text = this.color_text;
							this.productList.count = this.count;
							this.productList.sku_id = this.sku_id;
							cartList.push(this.productList);
						}
						uni.setStorageSync('shopCart', cartList);
					}
					uni.showToast({
						title: '加入购物车成功'
					})
					// if () {}
				} else if (this.goPage == 'buy') {
					// 结算订单
					this.productList.isChecked = false;
					// this.productList.count = this.data.count;
					this.productList.sku_code = this.sku_code;
					this.productList.color_text = this.color_text;
					this.productList.count = this.count;
					this.productList.sku_id = this.sku_id;
					// uni.setStorageSync('')
					console.log(this.productList);
					// return;
					this.$store.commit('setPayList', [this.productList]);
					uni.navigateTo({
						url: '../../order/order'
					})
				}
			}
		},
		onLoad (options) {
			console.log(options);
			this.productId = options.id;
			this.getGoodsDetail();
		},
		onShow() {
			// let collectList = uni.getStorageSync('collectList');
			// if (collectList) {
			// 	this.collectFlag = collectList.some(el => el.id == this.productList.id);
				
			// } else {
			// 	this.collectFlag = false;
			// }
			// console.log('2131');			
		}
	}
</script>

<style lang="scss" scoped>
.detail {
	.detail-t {
		position: relative;
		height: 634rpx;
		.swiper {
			width: 100%;
			height: 634rpx;
			border-radius: 0 0 0 200rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.collect {
			position: absolute;
			right: 96rpx;
			bottom: -50rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #354e44;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;
			image {
				width: 43rpx;
				height: 44rpx;
			}
			text {
				color: #fff;
				font-size: 22rpx;
			}
		}
	}
	.detail-c {
		margin-top: 80rpx;
		.color {
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.color-item {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 40rpx;
				&:first-child {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}
		.info {
			box-sizing: border-box;
			padding: 0 68rpx;
			margin-top: 28rpx;
			.cname {
				font-size: 36.4rpx;
				color: #3E3E3E;
				letter-spacing: 2.6rpx;
			}
			.ename {
				font-size: 30.8rpx;
				color: #B0B0B0;
				letter-spacing: 2.2rpx;
			}
			.price {
				margin: 23rpx 0 57rpx;
				font-size: 36.4rpx;
				color: #3E3E3E;
				letter-spacing: 2.6rpx;
			}
			.desc {
				font-size: 28rpx;
				color: #8A8A8A;
				letter-spacing: 2rpx;
				text-align: justify;
			}
		}
	}
	.detail-b {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 108rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 38rpx 0 57rpx;
		.contact {
			text-align: center;
			width: 100rpx;
			font-size: 22rpx;
			color: #3E3E3E;
			letter-spacing: 1.57rpx;
			image {
				width: 42rpx;
				height: 36rpx;
			}
		}
		.shopping {
			display: flex;
			.cart {
				width: 128rpx;
				height: 80rpx;
				background: #E2E2E2;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
			.buy {
				width: 238rpx;
				height: 80rpx;
				border-radius: 14rpx;
				text-align: center;
				line-height: 80rpx;
				background-color: #354E44;
				font-size: 32rpx;
				color: #FFFFFF;
				letter-spacing: 2.29rpx;
			}
		}
	}
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(216,216,216, .8);
		z-index: 20;
		display: flex;
		justify-content: center;
		align-items: center;
		.goods-info {
			width: 628rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			box-sizing: border-box;
			padding: 0 36rpx 0 62rpx;
			.info-t {
				width: 100%;
				height: 190rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				// padding-right: 38rpx;
				image {
					margin-top: -56rpx;
					width: 192rpx;
					height: 192rpx;
					border-radius: 10rpx;
				}
				.info-t-c {
					flex: 1;
					margin: 42rpx 0 0 30rpx;
					.title {
						font-size: 28rpx;
						font-weight: bolder;
						color: #3E3E3E;
						letter-spacing: 2rpx;
					}
					.stock {
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #B0B0B0;
						letter-spacing: 1.71rpx;
					}
				}
				.info-t-r {
					margin-top:28rpx;
					width: 41rpx;
					.close {
						width: 100%;
						height: 41rpx;
						// margin-top;
					}
				}
			}
			.info-c {
				width: 100%;
				padding-bottom: 36rpx;
				border-bottom: 1px solid rgba(151,151,151,0.24);
				.title {
					font-size: 28rpx;
					color: #414141;
					font-weight: bolder;
					letter-spacing: 2rpx;
				}
				.colors {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 18rpx;
					.color {
						width: 242rpx;
						height: 60rpx;
						font-size: 26rpx;
						// font-weight: bolder;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
						// opacity: 0.06;
						background: rgba(53,78,68, 0.06);
						border-radius: 10rpx;
						margin:16rpx 8rpx 0 0;
						&.active {
							border: 2px solid #000;
						}
					}
				}
			}
			.count {
				margin-top: 32rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: none;
				.opation {
					display: flex;
					.num {
						width: 72rpx;
						height: 40rpx;
						background: #F1ECE7;
						border-radius: 21.6rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24rpx;
						color: #3E3E3E;
						letter-spacing: 1.18px;
						margin: 0 8rpx;
					}
					.sub, .add {
						width: 38rpx;
						height: 40rpx;
						background: #F1ECE7;
						border-radius: 21.6rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						.line {
							width: 18rpx;
							height: 3rpx;
							border-radius: 2rpx;
							background-color: #979797;
						}
					}
					.add {
						flex-direction: column;
						.line {
							&:first-child {
								transform-origin: center;
								transform:  translateY(3.5rpx) rotate(90deg);
							}
						}
					}
				}
			}
			.confirm {
				
				width: 208rpx;
				height: 80rpx;
				background: #354E44;
				border-radius: 14rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				letter-spacing: 2.29rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 48rpx auto 102rpx;
			}
		}
	}
}
</style>
